*{
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,
    "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;

}
body {
    /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
    margin: 0;
    text-decoration: none;
    padding: 0;
    color: #333;
    background: #fff;

}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 60%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right input{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url() no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}

/*下拉刷新*/
.mescroll{width: 100%;}

/*分类*/
.article-1{width: 80%;margin: 0 auto;margin-top: 40px;}
.article-1 .left{width: 40px;float: left; text-align: left;padding-top: 7px;padding-bottom: 7px;}
.article-1 .right{width: 60%;float: left;padding-left: 50px;padding-right: 50px;}
.article-1 ul li a{float: left;margin-left: 1%; margin-top: 1px;border-radius: 5%;font-size: 12px; padding-top: 7px;padding-bottom: 7px;padding-left: 10px;padding-right: 10px;}
.article-1 ul li a:hover{color: white;background: #3498db;}

/*肚子*/
article{width: 80%;margin: 0 auto;height: 500px;}


.articl-1-2{width: 100%;padding: 0; margin-top: 30px;display: flex;justify-content: space-between;flex-wrap:wrap;}
.articl-1-2 .articl-1-2-box{height: 289px;width: 15%;}
.articl-1-2 .articl-1-2-box a img{height: 270px;width: 100%;border-radius: 5px; transition: all 1s; object-fit: cover;vertical-align: middle;}
.articl-1-2 .articl-1-2-box a img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
.articl-1-2 .articl-1-2-box a div{height: 20px;width: 100%; position:relative;color: white;margin: 0;top: 2px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.articl-1-2 .articl-1-2-box a div span{font-size: 0.5em;}
.articl-1-2 .articl-1-2-box a div span:hover{color:#3498db;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-left{float: left; width: 100%; background: rgba(0,0,0,0.5);}

.articl-1-2 .articl-1-2-box a span{position:relative;top: -19px;}
.articl-1-2 .articl-1-2-box a span:hover{color:#3498db;}

/*提示*/
#null-Warning{height: 100px;width: 100%;text-align: center;line-height: 100px;    font-size:1em; color: #999999;}

/*底部*/
footer{text-align: center;color: white;font-size: 1em;height: 200px;width: 100%;background: #282828;"微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";margin-top: 70px;}


#scroll-up{display: none;}
.only{background: #3498db;color: #ffffff;}
.mescroll{
    position: fixed;
    bottom: 0;
    height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}


/*响应式*/
@media screen and (max-width: 1100px) {
    .homeheader .centre{width: 100%;}
    .article-1{width: 100%;}
    article{width: 100%;}
}

@media screen and (max-width:900px){
    .homeheader .centre .left{display: none;}
    .homeheader .centre .right-img{display: none;}
    .homeheader .centre{width: 80%;}
    .articl-1-2 .articl-1-2-box a img{ max-width: 100%;max-height: 100%;}
    .article-1 .right{width: 90%;}
    #article-article-1{display: none;}

}
@media screen and (max-width: 800px) {
    .homeheader .centre .homeheader_centre{display: none;}
    .homeheader .centre{width: 100%;}
    .homeheader .centre .right{width:225px;margin: 0 auto;float:none;}
    .article-1{width: 100%;}
}
@media screen and (max-width: 700px) {
     body{font-size: 10px}
    .article-1 .left{float: none;margin: 0 auto;}
    .article-1 .right{width:100%;padding:0px;margin: 0 auto;float: none; }
    .articl-1-2 .articl-1-2-box{width: 33%;margin-top: 5px;height: 209px;}
    .articl-1-2 .articl-1-2-box a img{height: 190px;}
    .article-1{margin-top: 5px;}
    .articl-1-2{margin-top: 10px;}
    .article-1 ul li a {padding-top: 2px;padding-bottom: 2px;padding-left: 5px;padding-right: 5px;font-size: 0.7rem;width: 14%; text-align: center;margin-bottom: 5px;}
    .homeheader{height: 40px;}
    .homeheader .centre .right input{height: 10px; margin-bottom: 16px;}
}